<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录系统</title>
    <style>
        :root {
            --primary: #2563eb;
            --secondary: #1d4ed8;
            --error: #ef4444;
            --success: #22c55e;
            --warning: #f59e0b;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', system-ui, sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
            padding: 20px;
        }

        .login-card {
            background: rgba(255, 255, 255, 0.98);
            padding: 2.5rem;
            border-radius: 1.5rem;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 440px;
            animation: cardEntrance 0.6s ease;
        }

        @keyframes cardEntrance {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h1 {
            color: #1e293b;
            text-align: center;
            margin-bottom: 2rem;
            font-size: 1.8rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
            position: relative;
        }

        label {
            display: block;
            margin-bottom: 0.5rem;
            color: #475569;
            font-weight: 500;
        }

        .input-field {
            width: 100%;
            padding: 0.875rem;
            border: 2px solid #e2e8f0;
            border-radius: 0.75rem;
            font-size: 1rem;
            transition: all 0.2s;
        }

        .input-field:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }

        .password-wrapper {
            position: relative;
        }

        .toggle-password {
            position: absolute;
            right: 15px;
            top: 40%;
            transform: translateY(-50%);
            cursor: pointer;
            user-select: none;
            background: none;
            border: none;
            padding: 4px;
        }

        .strength-meter {
            height: 4px;
            background: #e2e8f0;
            border-radius: 2px;
            margin-top: 8px;
            overflow: hidden;
        }

        .strength-fill {
            width: 0;
            height: 100%;
            transition: all 0.3s ease;
        }

        .captcha-wrapper {
            display: flex;
            gap: 1rem;
            margin-top: 0.5rem;
        }

        .captcha-input {
            flex: 1;
        }

        .send-btn {
            padding: 0.875rem 1.5rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }

        .send-btn:disabled {
            background: #cbd5e1;
            cursor: not-allowed;
        }

        .submit-btn {
            width: 100%;
            padding: 1rem;
            background: var(--secondary);
            color: white;
            border: none;
            border-radius: 0.75rem;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }

        .submit-btn:hover {
            opacity: 0.9;
        }

        .error-msg {
            color: var(--error);
            font-size: 0.875rem;
            margin-top: 0.25rem;
            display: none;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #e2e8f0;
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        @media (max-width: 480px) {
            .login-card {
                padding: 1.5rem;
            }

            .captcha-wrapper {
                flex-direction: column;
            }

            .send-btn {
                width: 100%;
            }
        }

        .toast {
            position: fixed;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            padding: 1rem 2rem;
            border-radius: 0.5rem;
            color: white;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 1000;
        }

        .toast.visible {
            opacity: 1;
        }

        .toast.success {
            background: var(--success);
        }

        .toast.error {
            background: var(--error);
        }
    </style>
</head>

<body>
    <div class="login-card">
        <h1>验证码登录</h1>
        <form id="loginForm" action="/login/login" method="post">
            <!-- 验证码 -->
            <div class="form-group">
                <label for="captcha">验证码</label>
                <div class="captcha-wrapper">
                    <input type="text" id="captcha" class="input-field captcha-input" placeholder="输入验证码"
                        data-validate="captcha">
                    <button type="button" id="sendBtn" class="send-btn">获取验证码</button>
                </div>
                <div class="error-msg" id="captchaError"></div>
            </div>

            <button type="submit" class="submit-btn">
                <span id="btnText">立即登录</span>
            </button>
            <p>{{.Yzm}}</p>
        </form>
    </div>

    <!-- 加载遮罩 -->
    <div class="loading-overlay" id="loader">
        <div class="spinner"></div>
    </div>
    <div id="toastContainer"></div>
    

    <script>
        // DOM元素
        const sendBtn = document.getElementById('sendBtn');
        const captchaInput = document.getElementById('captcha');
        const strengthFill = document.querySelector('.strength-fill');

        // 验证规则
        const validationRules = {
            captcha: value => /^\d{6}$/.test(value)
        };

        // 错误提示信息
        const errorMessages = {
            captcha: {
                empty: '验证码不能为空',
                invalid: '验证码为6位数字'
            }
        };

        // 显示错误提示
        function showError(field, message) {
            const errorElement = document.getElementById(`${field}Error`);
            errorElement.textContent = message;
            errorElement.style.display = 'block';
        }

        // 清除错误提示
        function clearError(field) {
            const errorElement = document.getElementById(`${field}Error`);
            errorElement.textContent = '';
            errorElement.style.display = 'none';
        }

        // 实时验证输入
        function validateInput(field) {
            const value = document.getElementById(field).value.trim();
            const rule = validationRules[field];

            clearError(field);

            if (!value) {
                showError(field, errorMessages[field].empty);
                return false;
            }

            if (!rule(value)) {
                showError(field, errorMessages[field].invalid);
                return false;
            }

            return true;
        }

        // 发送验证码
        async function sendVerificationCode() {
            try {
                sendBtn.disabled = true;
                sendBtn.textContent = '发送中...';

                // 发送POST请求
                const response = await fetch("/login/yzm", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    // body: JSON.stringify({})
                });

                const data = await response.json();

                if (data.message != "OK") {
                    throw new Error(data.message || '验证码发送失败');
                }

                // 成功处理
                startCountdown(30);
                showToast('验证码已发送至注册邮箱', 'success');
            } catch (error) {
                console.error('发送失败:', error);
                showError('captcha', error.message || '验证码发送失败');
                sendBtn.disabled = false;
                sendBtn.textContent = '获取验证码';
            }
        }

        // 倒计时函数
        function startCountdown(seconds) {
            let remaining = seconds;
            const timerInterval = setInterval(() => {
                sendBtn.textContent = `${remaining}秒后重试`;
                if (remaining-- <= 0) {
                    clearInterval(timerInterval);
                    sendBtn.disabled = false;
                    sendBtn.textContent = '获取验证码';
                }
            }, 1000);
        }

        // 处理表单提交
        async function handleSubmit(e) {
            e.preventDefault(); // 阻止默认提交

            // 验证所有字段
            const isValid = ['captcha'].every(validateInput);
            if (!isValid) return;

            try {
                showLoading();

                // 创建表单数据对象
                const formData = new FormData();
                formData.append('captcha', captchaInput.value.trim());

                // 发送传统表单提交
                const response = await fetch(e.target.action, {
                    method: 'POST',
                    body: new URLSearchParams(formData),
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                });                
                // 处理响应
                if (response.redirected) {
                    window.location.href = response.url;
                } else {
                    const result = await response.json();
                    if (result.message == "OK") {
                        if (result.data.url != ""){
                            window.location.href = result.data.url;
                        }else{
                            window.location.href = "/";
                        }
                        
                    } else {
                        showError('captcha', result.message || '登录失败');
                    }
                }
            } catch (error) {
                showError('captcha', '网络连接错误');
            } finally {
                hideLoading();
            }
        }

        // 显示加载状态
        function showLoading() {
            document.getElementById('loader').style.display = 'flex';
        }

        // 隐藏加载状态
        function hideLoading() {
            document.getElementById('loader').style.display = 'none';
        }

        // 事件监听
        sendBtn.addEventListener('click', sendVerificationCode);
        document.getElementById('loginForm').addEventListener('submit', handleSubmit);

        // 输入实时验证
        document.querySelectorAll('[data-validate]').forEach(input => {
            input.addEventListener('input', () => validateInput(input.dataset.validate));
        });

        // Toast提示函数
        function showToast(message, type = 'success') {
            const toast = document.createElement('div');
            toast.className = `toast ${type} visible`;
            toast.textContent = message;

            document.getElementById('toastContainer').appendChild(toast);

            setTimeout(() => {
                toast.remove();
            }, 3000);
        }
    </script>

</body>

</html>